import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
import 'package:test01/config/Config.dart';
import 'package:test01/config/q_theme.dart';
import 'package:test01/model/banner_model.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:test01/model/recommend_travel.dart';

class HomeContent extends StatefulWidget {
  const HomeContent({Key? key}) : super(key: key);

  @override
  _HomeContentState createState() => _HomeContentState();
}

class _HomeContentState extends State<HomeContent> {
  List<BannerItemModel> _bannerData = [];
  List<RecommendTravelItem> _recommendTravel = [];
  List<RecommendTravelItem> _recommendDetail = [];
  Color qBackgroundColor = Colors.white;

  @override
  void initState() {
    // TODO: implement initState
    _getBannerData();
    _getRecommendTravel();
    _getRecommendDetail();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        _swiperWidget(),
        _recommendTravelWidget(),
        SizedBox(height: 20.h,),
        _recommendDetailWidget()
      ],
    );
  }

  // 获取轮播图数据
  _getBannerData() async {
    var api = "${Config.domain}banner/getShowBanner";
    var result = await Dio().get(api);
    var bannerList = BannerModel.fromJson(result.data);
    if (mounted) {
      setState(() {
        _bannerData = bannerList.data!;
      });
    }
  }

  // 获取推荐景区数据
  _getRecommendTravel() async {
    var api = "${Config.domain}recommend/getTravelRecommend";
    var result = await Dio().get(api);
    var recommendTravelList = RecommendTravel.fromJson(result.data);
    if (mounted) {
      setState(() {
        _recommendTravel = recommendTravelList.data!;
      });
    }
  }

  // 获取推荐景点数据
  _getRecommendDetail() async {
    var api = "${Config.domain}recommend/getDetailRecommend";
    var result = await Dio().get(api);
    var recommendDetailList = RecommendTravel.fromJson(result.data);
    if (mounted) {
      setState(() {
        _recommendDetail = recommendDetailList.data!;
      });
    }
  }

  // 轮播图
  Widget _swiperWidget() {
    if (_bannerData.isNotEmpty) {
      return Container(
        padding: EdgeInsets.all(15.w),
        child: AspectRatio(
          aspectRatio: 2.2 / 1,
          child: Swiper(
            itemCount: _bannerData.length,
            itemBuilder: (context, index) {
              return Image.network(
                _bannerData[index].bannerUrl!,
                fit: BoxFit.fill,
              );
            },
            autoplay: true,
            pagination: SwiperPagination(
                // 分页指示器
                alignment: Alignment.bottomCenter,
                // 位置 Alignment.bottomCenter 底部中间
                margin: const EdgeInsets.fromLTRB(0, 0, 0, 5),
                // 距离调整
                builder: DotSwiperPaginationBuilder(
                    // 指示器构建
                    space: 5.w,
                    // 点之间的间隔
                    size: 15.w,
                    // 没选中时的大小
                    activeSize: 15.w,
                    // 选中时的大小
                    color: Colors.black54,
                    // 没选中时的颜色
                    activeColor: Colors.white)),
            // control: const SwiperPagination(),
            // 页面控制器 左右翻页按钮
            scale: 0.95, // 两张图片之间的间隔
            // control: SwiperControl(),
          ),
        ),
      );
    } else {
      return const Text("");
    }
  }


  // 推荐景区
  Widget _recommendTravelWidget() {
    if (_recommendTravel.isNotEmpty) {
      return Container(
        padding: EdgeInsets.all(10.h),
        color: qBackgroundColor,
        child: Column(
          children: [
            buildRecommendTitle("推荐景区"),
            _buildRecommendItem(
              _recommendTravel[0],
            ),
            Row(
              children: [
                _buildRecommendItem(
                  _recommendTravel[1],
                  width:350.w,
                  height: 200.h
                ),
            _buildRecommendItem(
              _recommendTravel[2],
              width:350.w,
              height: 200.h
            ),
              ],
            )
          ],
        ),
      );
    } else {
      return const Text("");
    }
  }

  // 构建推荐标题
  Row buildRecommendTitle(String title, {IconData? iconData}) {
    return Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                iconData ?? Icons.local_fire_department,
                color: Colors.red,
              ),
              Text(
                title,
                style: TextStyle(fontSize: 28.w, color: Colors.black87),
              )
            ],
          );
  }


  // 构建推荐项
  Widget _buildRecommendItem(RecommendTravelItem item,{double? width, double? height}) {
    return GestureDetector(
      onTap: () {
        Navigator.pushNamed(context, "/travel", arguments: {
          "outId": item.outId,
          "classify": item.classify
        });
      },
      child: Column(
        children: [
          Container(
            height: height ?? 300.h,
            width: width ?? 750.w,
            padding: EdgeInsets.all(10.w),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20.w),
            ),
            child: Image.network(
              item.picture!,
              fit: BoxFit.fill,
            ),
          ),
          Column(
            children: [
              Container(
                width:width ?? 750.w,
                padding: EdgeInsets.only(left: 20.w),
                alignment: Alignment.centerLeft,
                child: Text(
                  item.name!,
                  style: TextStyle(fontSize: 28.w, color: Colors.black87),
                )),
              Container(
                width:width ?? 750.w,
                padding: EdgeInsets.only(left: 20.w),
                alignment: Alignment.centerLeft,
                child: Row(
                  children: [
                    Icon(
                      Icons.add_location,
                      size: 20.w,
                      color: Colors.black26,
                    ),
                    Text(
                      item.place!,
                      style: TextStyle(fontSize: 23.w, color: Colors.black26),
                    )
                  ],
                ),
              )
            ],
          )

        ],
      ),
    );
  }

  // 构建推荐景点项
  Widget _buildRecommendDetailItem(RecommendTravelItem item) {
    if(_recommendDetail != null) {
      return GestureDetector(
        onTap: () {
          Navigator.pushNamed(context, "/travel", arguments: {
            "outId": item.id,
            "classify": 1
          });
        },
        child: Container(
          padding: EdgeInsets.all(10.w),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Image.network(
                item.picture!,
                width: 450.w,
                height: 200.h,
                fit: BoxFit.fill,
              ),
              Expanded(
                  child: Container(
                    padding: EdgeInsets.only(left: 20.w),
                    width: 450.w,
                    height: 200.h,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          item.name!,
                          style: TextStyle(fontSize: 28.w, color: Colors.black87),
                        ),
                        Row(
                          children: [
                            Icon(
                              Icons.add_location,
                              size: 20.w,
                              color: Colors.black26,
                            ),
                            Text(
                              item.place!,
                              style: TextStyle(fontSize: 23.w, color: Colors.black26),
                            )
                          ],
                        )
                      ],
                    ),
                  ))
            ],
          ),
        ),
      );
    }
    else {
      return const Text("");
    }
  }

  // 推荐景点
  Widget _recommendDetailWidget() {
    if (_recommendDetail.isNotEmpty) {
      return Container(
        padding: EdgeInsets.all(10.h),
        color: Colors.white,
        child: Column(
          children: [
            buildRecommendTitle("推荐景点", iconData: Icons.travel_explore),
            _buildRecommendItem(_recommendDetail[0]),
            _buildRecommendDetailItem(_recommendDetail[1]),
            _buildRecommendDetailItem(_recommendDetail[2])
          ],
        ),
      );

    }
    else {
      return const Text("");
    }
  }


}
